<template>
    <n-drawer v-model:show="isDrawer" width="600" :auto-focus="false" @after-leave="handleReset">
      <n-drawer-content title="会员卡发放" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="top"
          :label-width="100"
        >
          <n-form-item label="宝类型" path="charge_leixing">
            <n-checkbox-group v-model:value="formParams.charge_leixing">
              <n-space item-style="display: flex;">
                <n-checkbox value="1" label="普通宝" />
                <n-checkbox value="2" label="快充宝" />
              </n-space>
            </n-checkbox-group>
          </n-form-item>
          <n-form-item label="用户会员号或手机号" path="users_id">
            <n-input placeholder="请输入用户会员号或手机号" v-model:value="formParams.users_id" />
          </n-form-item>
          <n-form-item label="会员卡类型" path="membershipcard_id">
            <n-select clearable placeholder="请选择会员卡类型" v-model:value="formParams.membershipcard_id" :options="hykleixingAll"/>
          </n-form-item>
          <n-form-item label="减免类型" path="jm_leixing">
            <n-select clearable placeholder="请选择减免类型" v-model:value="formParams.jm_leixing" :options="jmleixingAll" @update:value="jmleixingChange"/>
          </n-form-item>
          <n-form-item label="单次减免时长(小时)" path="shichang" v-if="formParams.jm_leixing == 1">
            <n-select clearable placeholder="请选择单次减免时长" v-model:value="formParams.shichang" :options="jmshichangAll"/>
          </n-form-item>
          <n-form-item label="单次减免金额(元)" path="jine" v-if="formParams.jm_leixing == 2">
            <n-input placeholder="请输入单次减免金额" v-model:value="formParams.jine" />
          </n-form-item>
          <n-form-item label="单日可用次数" path="cishu">
            <n-select clearable placeholder="请选择单次减免时长" v-model:value="formParams.cishu" :options="cishuAll"/>
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space>
            <n-button @click="handleReset">重置</n-button>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </template>
  
  <script lang="ts" setup>
    import {  ref } from 'vue';
    import { useMessage, FormRules } from 'naive-ui';
    import { userInfo } from '@/api/system/user';
    import { grent } from '@/api/card/index';
  
    const rules: FormRules = {
      users_id: {
        required: true,
        message: '用户会员号或手机号不能为空',
        trigger: 'blur',
      }
    };
  
    const defaultValueRef = () => ({
      czz_id: 1,
      bussiness_id: '',
      bussiness_name: '',
      users_id: '',
      charge_leixing: ["1","2"],
      membershipcard_id: null,
      jm_leixing: null,
      shichang: null,
      jine: '',
      cishu: null,
    });

    const defaultValueRefs = () => ({
      id: null,
    });
  
    const message = useMessage();
    const formRef: any = ref(null);
    const isDrawer = ref(false);
    const subLoading = ref(false);
    const formParams = ref(defaultValueRef());
    const formParamss = ref(defaultValueRefs());
    const emit = defineEmits(['change']);

    const hykleixingAll = ref([
      {
        label: "月卡",
        value: 1,
      }, {
        label: '季卡',
        value: 2
      }, {
        label: '年卡',
        value: 3
      }, {
        label: '两年卡',
        value: 4
      }, {
        label: '三年卡',
        value: 5
      }
    ])

    const jmleixingAll = ref([
      {
        label: "时长",
        value: 1,
      },
      {
        label: '金额',
        value: 2
      }
    ])

    const jmshichangAll = ref([
      {
        label: "1小时",
        value: 1,
      }, {
        label: '2小时',
        value: 2
      }, {
        label: '3小时',
        value: 3
      }, {
        label: '5小时',
        value: 5
      }, {
        label: '7小时',
        value: 7
      }, {
        label: '9小时',
        value: 9
      }, {
        label: '24小时',
        value: 24
      }
    ])

    const cishuAll = ref([
      {
        label: "1次",
        value: 1,
      }, {
        label: '2次',
        value: 2
      }, {
        label: '3次',
        value: 3
      }, {
        label: '5次',
        value: 5
      }, {
        label: '无限次',
        value: 9999
      }
    ])
  
    async function openDrawer(id?) {
      if (id) {
        formParamss.value.id = id;
        getInfo();
        return;
      }
      isDrawer.value = true;
    }
  
    function closeDrawer() {
      isDrawer.value = false;
    }
  
    function formSubmit() {
      formRef.value.validate((errors) => {
        if (!errors) {
          grent(formParams.value).then((res) => {
            console.log(res)
            message.success(res);
            emit('change');
            handleReset();
            closeDrawer();
          });
        } else {
          message.error('请填写完整信息');
        }
      });
    }
  
    function handleReset() {
      formRef.value.restoreValidation();
      formParams.value = Object.assign(formParams.value, defaultValueRef());
    }

    function jmleixingChange(value: string) {
      formParams.value.jm_leixing = value;
    }

    function getInfo() {
      userInfo({ id: formParamss.value.id }).then((res) => {
        const params = {
          bussiness_id: res.id,
          bussiness_name: res.nickname,
        };

        formParams.value = Object.assign(formParams.value, params);
        isDrawer.value = true;
      });
    }
  
    defineExpose({
      openDrawer,
      closeDrawer,
    });
  </script>
  